@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.upsell {
	padding: 16px;
	box-sizing: border-box;
	background: var(--color-surface);
	box-shadow: 0 0 0 1px var(--color-border-subtle);

	@include break-mobile {
		margin-bottom: 16px;
		padding: 24px;
	}

	& > *:first-child {
		margin-bottom: 16px;
	}

	& > *:not(:first-child):not(:last-child) {
		margin-bottom: 24px;
	}

	& > *:last-child {
		margin-bottom: 6px;
	}

	&__body-text {
		font-size: 1rem;
	}
}

.upsell__button {
	text-align: center;
	width: 100%;

	@include breakpoint-deprecated( ">660px" ) {
		text-align: auto;
		width: auto;
	}
}

.upsell__button:not(.is-primary) {
	margin-left: 0;

	border-color: var(--color-neutral-10);

	@include breakpoint-deprecated( ">660px" ) {
		margin-left: 16px;
	}
}
